<main class="page-tab pt-3" id="tab-timelapseViewer">
    <div class="dark row">
        <%  Object.keys(define['Timelapse'].blocks).forEach(function(blockKey) { -%>
          <%- include('drawBlock', {
                theBlock: define['Timelapse'].blocks[blockKey]
              }) %>
        <%  }) -%>
    </div>
    <div style="margin-bottom: 50px;"></div>
    <h4 class="sticky-bar p-3 d-flex flex-row">
        <div>
            <div class="dropdown">
              <button class="btn btn-sm btn-primary dropdown-toggle" type="button" id="monitorsListOptions" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="fa fa-bars"></i>
              </button>
              <ul class="dropdown-menu <%- `${define.Theme.isDark ? 'dropdown-menu-dark bg-dark text-white' : 'bg-light text-dark'}` %> shadow-lg" aria-labelledby="monitorsListOptions">
                <li><a class="dropdown-item download-selected-frames cursor-pointer"><%- lang.Download %></a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item zip-selected-frames cursor-pointer"><%- lang['Zip and Download'] %></a></li>
                <!-- <li><a class="dropdown-item merge-selected-videos cursor-pointer"><%- lang.Merge %></a></li> -->
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item delete-selected-frames cursor-pointer"><%- lang.Delete %></a></li>
              </ul>
            </div>
        </div>
    </h4>
</main>
